<?php /*a:2:{s:54:"/www/wwwroot/mall/public/template/mall/cart/index.html";i:1627722958;s:64:"/www/wwwroot/mall/public/template/mall/../index/public/mlay.html";i:1624501447;}*/ ?>
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<title><?php echo htmlentities((isset($page_title) && ($page_title !== '')?$page_title:config('app.web_site_title'))); ?></title>
		<meta name="keywords" content="<?php echo config('app.web_site_keywords'); ?>">
		<meta name="description" content="<?php echo config('app.web_site_description'); ?>">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, shrink-to-fit=no, user-scalable=no">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		
		
		<!-- Icons -->
		<link rel="icon" href="/static/images/favicon.ico">
		<!-- END Icons -->
		
		<!-- Stylesheets -->
		<link rel="stylesheet" href="/static/libs/weui/css/weui.min.css">
		<link rel="stylesheet" href="/static/libs/weui/css/common.css?v=<?php echo config('app.asset_version'); ?>">
		<link rel="stylesheet" href="/static/css/font/iconfont.css?v=<?php echo config('app.asset_version'); ?>">
		<!-- END Stylesheets -->
		
<style>
	.input {
		background: none;
		outline: none;
		border: none;
		padding: 0.5rem;
	}

	.allChecked {
		background-image: url('/template/static/img/check.png');
		background-size: cover;
	}

	.isCheck {
		background-image: url('/template/static/img/check.png');
		background-size: cover;
	}

	.item {
		width: 20px;
		height: 20px;
		margin: 0 5px;
		border: 1px solid #C5C5C5;
		border-radius: 50%;
	}
	.van-stepper--round .van-stepper__plus{
		background-color: #a78928 !important;
	}
	.van-stepper--round .van-stepper__minus{
		color: #a78928 !important;
		border: 1px solid #a78928 !important;
	}
</style>
<!-- 公共css样式在这里 弹性布局也在这里 -->
<link rel="stylesheet" href="/template/static/css/public.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />

	</head>
	<body id="<?php echo htmlentities(strtolower(app('request')->app())); ?>-<?php echo htmlentities(strtolower(app('request')->controller())); ?>-<?php echo htmlentities(strtolower(app('request')->action())); ?>">
		<!-- Page Container -->
		<div class="page" id="main">
			
			
<div id="app">
	<div v-if="this.cartList.length!=0" style="padding-bottom: 50px;">
		<div v-for="(item,index) in cartList" :key="index" class="">
			<div style="background: #fff;margin: 10px 10px 10px 10px;border-radius: 20px;padding: 10px 0;"
				class="flex ai_center">
				<div :class="{isCheck:item.checked}" @click="changeitem(item)" class="item">
				</div>
				<img style="width: 80px;height: 80px;border-radius: 10px;margin: 0 10px;" v-cloak :src="item.cover"
					mode="">
				<div style="flex: 1;" class="">
					<div style="font-size: 0.8rem;" class="" v-cloak>
						{{item.title}}
					</div>
					<div class="flex ai_center ju_sb">
						<div style="color: #a78928;font-size: 0.8rem;margin-right: 1rem;" class="" v-cloak>
							￥{{item.price}}
						</div>
						<div class="" style="padding-right: 0.5rem;">
							<van-stepper @change="stepper" @plus="jia(item)" @minus="jian(item)" v-model="item.number"
								theme="round" button-size="22" disable-input />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div v-if="this.cartList.length!=0" style="padding: 10px 0;width: 100%;position: fixed;bottom: 50px;background: #fff;z-index: 1000;"
		class="left50 flex ai_center ju_sb bagfff">
		<div class="flex">
			<div style="margin-left: 10px;" @click="selectAll()" class="flex ai_center">
				<div :class="{allChecked:allChecked}" class="item">
				</div>
				<div style="color: #C5C5C5;font-size: 0.75rem;" class="">
					全选
				</div>
			</div>
			<div @click="deletes" style="font-size: 0.8rem;margin-left: 0.5rem;" class="">
				删除
			</div>
		</div>
		<div class="flex ai_center">
			<div style="color: #a78928;font-size: 0.75rem;" class="">
				合计:<span>￥<span style="font-size: 1.2rem;" v-cloak>{{total}}</span></span>
			</div>
			<div @click="click_settlement"
				style="background: #a78928;margin-left: 10px;color: #fff;border-radius: 30px;padding: 6px 20px;margin-right: 10px;font-size: 0.8rem;"
				class="">
				结算
			</div>
		</div>
	</div>
	<div v-show="show" style="text-align: center;padding-top: 10rem;display: none;color: #949494;" class="">
		<img style="width: 4rem;" src="/template/static/img/icon/cart.png" >
		<p>购物车是空的</p>
	</div>
</div>

		</div>
		<!-- END Page Container -->
		<!-- FOOT -->
		
		
		<!-- Footer -->
		<!-- 工具栏 -->
		<div class="footer"></div>
		<?php if(!(empty($nav['main_nav']) || (($nav['main_nav'] instanceof \think\Collection || $nav['main_nav'] instanceof \think\Paginator ) && $nav['main_nav']->isEmpty()))): ?>
		<nav class="bar-tab weui-flex">
			<?php if(is_array($nav['main_nav']) || $nav['main_nav'] instanceof \think\Collection || $nav['main_nav'] instanceof \think\Paginator): $i = 0; $__LIST__ = $nav['main_nav'];if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$menu): $mod = ($i % 2 );++$i;?>
			<a class="tab-item weui-flex__item<?php if(isset($active) && $active == $menu['rel']): ?> active<?php endif; ?>" href="<?php echo htmlentities($menu['url']); ?>">
				<span class="icoimg <?php echo htmlentities($menu['css']); if(isset($active) && $active == $menu['rel']): ?>-full<?php endif; ?>"></span>
				<span class="tab-label"><?php echo htmlentities($menu['title']); ?></span>
			</a>
			<?php endforeach; endif; else: echo "" ;endif; ?>
		</nav>
		<?php endif; ?>
		<!-- Footer -->
		

		
		<ul id="Fixed">
			<li id="goTop" class="ico ico-up hidden" title="去顶部"></li>
		</ul>
		
		<!-- END FOOT-->
		<div class="hidden">
			
			<?php echo config('app.web_site_statistics'); ?>
			
		</div>
		<!--js -->
		<script src="/static/libs/weui/js/jquery.min.js"></script>
		<script src="/static/libs/weui/js/weui.min.js"></script>
		<script src="/static/libs/weui/js/common.js?<?php echo config('app.asset_version'); ?>"></script>
		
		<?php if(!(empty($jssdk) || (($jssdk instanceof \think\Collection || $jssdk instanceof \think\Paginator ) && $jssdk->isEmpty()))): ?>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
		<script>
			wx.config({
				debug: false,
				appId: '<?php echo htmlentities($jssdk['appid']); ?>',
				timestamp: '<?php echo htmlentities($jssdk['timestamp']); ?>',
				nonceStr: '<?php echo htmlentities($jssdk['noncestr']); ?>',
				signature: '<?php echo htmlentities($jssdk['signature']); ?>',
				jsApiList: [
					'updateAppMessageShareData',
					'updateTimelineShareData',
					'hideMenuItems',
					'showMenuItems',
					'closeWindow',
				],
				openTagList: ['wx-open-launch-weapp']
			});
			wx.ready(function() {
				wx.updateAppMessageShareData({
					title: "<?php echo htmlentities((isset($share['title']) && ($share['title'] !== '')?$share['title']:config('app.web_site_title'))); ?>", // 分享标题
					desc: "<?php echo htmlentities((isset($share['desc']) && ($share['desc'] !== '')?$share['desc']:config('app.web_site_slogan'))); ?>", // 分享描述
					link: "<?php echo htmlentities((isset($share['url']) && ($share['url'] !== '')?$share['url']:$jssdk['url'])); ?>", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: "<?php echo htmlentities((isset($share['img']) && ($share['img'] !== '')?$share['img']:app('request')->scheme() . '://' .app('request')->host() .'/static/images/share.png')); ?>", // 分享图标
					success: function() {
						// 设置成功
					}
				});
				wx.updateTimelineShareData({
					title:  "<?php echo htmlentities((isset($share['title']) && ($share['title'] !== '')?$share['title']:config('app.web_site_title'))); ?>", // 分享标题
					link: "<?php echo htmlentities((isset($share['url']) && ($share['url'] !== '')?$share['url']:$jssdk['url'])); ?>", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: "<?php echo htmlentities((isset($share['img']) && ($share['img'] !== '')?$share['img']:app('request')->scheme() . '://' .app('request')->host() .'/static/images/share.png')); ?>", // 分享图标
					success: function() {
						// 设置成功
					}
				});
				<?php if(!(empty($share['hide']) || (($share['hide'] instanceof \think\Collection || $share['hide'] instanceof \think\Paginator ) && $share['hide']->isEmpty()))): ?>
				wx.hideMenuItems({
					menuList: ['menuItem:copyUrl', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:openWithQQBrowser',
						'menuItem:openWithSafari', 'menuItem:share:email', 'menuItem:favorite', 'menuItem:share:qq',
						'menuItem:share:weiboApp', 'menuItem:favorite', 'menuItem:share:QZone'] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
				});
				<?php endif; ?>
				wx.showMenuItems({
					menuList: ["menuItem:profile", "menuItem:addContact", ] // 要显示的菜单项，所有menu项见附录3
				});
			});
		</script>
		<?php endif; ?>
		
		
<!-- 引入vue.js文件使用vue开发 -->
<script src="/template/static/js/public/vue.min.js" type="text/javascript" charset="utf-8"></script>
<!-- vant -->
<script src="/template/static/js/public/vant-2.12.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 接口统一管理 -->
<script src="/template/static/js/http/api.js" type="text/javascript" charset="utf-8"></script>
<!-- 当前页面独有js -->
<!-- <script src="/template/static/js/the_shopping_cart.js?v=<?php echo time(); ?>" type="text/javascript" charset="utf-8"></script> -->
<!-- 引入axios请求库 -->
<script src="/template/static/js/http/axios.min.js" type="text/javascript"></script>
<!-- 再次封装axios 方便使用 -->
<script src="/template/static/js/http/http.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var the_shopping_cart = new Vue({
		el: "#app",
		data() {
			return {
				show: false,
				allChecked: false, //全选状态  true|false
				total: 0, //总价
				cartList: [],//购物车列表
				itemIdsEdit: [],//选中的
			}
		},
		//计算属性
		computed: {
			// totalPrice() { //总价
			// 	let totalPrice = 0
			// 	for (let i = 0; i < this.cartList.length; i++) {
			// 		totalPrice += this.cartList[i].price * this.cartList[i].number
			// 	}
			// 	return Number(totalPrice.toFixed(2)); //总价
			// },
		},
		//监听属性
		watch: {},
		//钩子函数
		created() {
			this.cart() //数据
			
		},
		mounted() {

		},
		methods: {
			//单选
			changeitem(item) {
				item.checked = !item.checked
				if (!item.checked) {
					this.allChecked = false
				} else {
					//用every方法检测数组cartList的所有元素是否都是true
					const cartList2 = this.cartList.every(item => {
						return item.checked === true
					})
					if (cartList2) {
						this.allChecked = true
					} else {
						this.allChecked = false
					}
				}
				this.calcTotal() //点击调用计算总价方法
			},
			//全选，全不选
			selectAll() {
				if (this.cartList.length != 0) {
					this.allChecked = !this.allChecked
					if (this.allChecked) {
						this.cartList.map(item => {
							item.checked = true
						})
					} else {
						this.cartList.map(item => {
							item.checked = false
						})
					}
					this.calcTotal() //点击调用计算总价方法
				}
			},
			click_settlement() { //跳转结算页面
				// 结算接口
				var that = this
				this.cartList.forEach(item => {
					if (item.checked === true) {
						that.itemIdsEdit.push(item.id);
					}
				})
				if (that.itemIdsEdit.length <= 0) {
					weui.topTips('请选择购物车商品');
					return false;
				}
				setTimeout(function(){
					$.post("<?php echo url('mall/order/create'); ?>", {
						ids: that.itemIdsEdit,
					}, function(res) {
						console.log(res);
						that.itemIdsEdit = [];
						if (res.code == 1) {
							window.location.href = res.url
						} else {
						    weui.alert( res.msg ,
                        	{
                        	    title: '系统提示'
                        	});
				// 			vant.Toast.fail(res.msg);
						}
					})
				},100)
				
			},
			stepper(e) {
				console.log(e);
			},
			jia(e) {			
				console.log('jia', e);
				var that = this
				$.post("<?php echo url('mall/cart/add'); ?>", {
					gid: e.gid,
					nums: 1,
				}, function(res) {
					console.log(res);
					if (res.code == 1) {
						vant.Toast.success('添加成功');
					} else {
						vant.Toast.fail(res.msg);
					}
				})
				setTimeout(function(){
					that.calcTotal() //默认调用计算总价方法
				},100)
				// setInterval(function(){
					
				// },100)
			},
			jian(e) {
				var that = this
				console.log('jian', e);
				$.post("<?php echo url('mall/cart/add'); ?>", {
					gid: e.gid,
					nums: -1,
				}, function(res) {
					if (res.code == 1) {
						vant.Toast.success('添加成功');
					} else {
						vant.Toast.fail(res.msg);
					}
					console.log(res);
				})
				setTimeout(function(){
					that.calcTotal() //默认调用计算总价方法
				},100)
			},
			cart() {
				let that = this
				$.post("", '', function(res) {
					console.log(res);
					that.cartList = res.data
					if (that.cartList.length === 0) {
						that.show = true
					}
					that.selected_by_default() //默认选中
					that.calcTotal() //默认调用计算总价方法
				})
			},
			//计算总价方法
			calcTotal() {
				var list = this.cartList; //赋值给list方便操作
				if (list.length === 0) {
					return;
				}
				let total = 0;
				let checked = true;
				list.forEach(item => {
					if (item.checked === true) {
						total += item.price * item.number; //每个商品的价格乘以个数
					} else if (checked === true) {
						checked = false;
					}
				})
				this.allChecked = checked;
				this.total = Number(total.toFixed(2)); //总价
			},
			selected_by_default() {
				if (this.cartList.length != 0) {
					this.cartList.map((item, index) => {
						this.$set(item, 'checked', true);
						// js
						this.allChecked = true;
						return item;
					})
				}
			},
			// 删除
			deletes() {
				console.log('删除');
				var that = this
				this.cartList.forEach(item => {
					if (item.checked === true) {
						that.itemIdsEdit.push(item.id);
					}
				})
				$.post("<?php echo url('mall/cart/delete'); ?>", {
					ids: that.itemIdsEdit,
				}, function(res) {
					console.log(res);
					that.itemIdsEdit = [];
					that.cart();
				})
			}
		}
	})
</script>

	</body>
</html>
